<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>充值</title>
		<link rel="stylesheet" href="../libs/mui/mui.css" />
		<link rel="stylesheet" href="../css/main.css" />
		<style>
			.mui-input-row input{margin-bottom: 0;padding: 0;border: none;}
			::-webkit-input-placeholder{font-size: 12px;line-height:20px ;}
			::-moz-placeholder{font-size: 12px;line-height:20px ;}
			::-ms-input-placeholder{font-size: 12px;line-height:20px ;}
			.price{padding: 20px 15px;background-color: #fff;}
			.price>span{padding:6px 12px;border:1px solid #aaa;width: 20%;text-align: center;display: inline-block;margin: 0 1.88%;border-radius: 5px;}
			.price>span:nth-child(5),.price>span:nth-child(6){margin-top: 20px;}
			.lvs{border-color:#139f13 !important;color:#139f13;}
			.btn>button{width: 30%;background-color:#139f13 ;color: #fff;border:none;padding: 8px 15px;}
			@media screen and (max-width: 350px){
				.price>span{padding:6px 6px;width: 19%;margin: 0 2.2%;}
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left">
				<span>充值</span>
			</a>
		</header>
		<div class="mui-content">
			<div></div>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell" style="padding: 3px 15px;">
					<div class="mui-input-row">
						<input type="text" placeholder="默认用注册手机号码充值，也可在此填写代替号码">
					</div>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					选择充值金额(元)
				</li>
			</ul>
			<div class="price">
				<span>5</span>
				<span>10</span>
				<span>30</span>
				<span>50</span>
				<span>100</span>
				<span>300</span>
				<span>400</span>
				<span>500</span>
			</div>
			<div class="btn mui-text-center m2">
				<button type="button" class="mui-btn">立即充值</button>
			</div>
		</div>
	</body>
	<script src="../js/mui.js"></script>
	<script src="../libs/jquery/jquery.js"></script>
	<script>
		 $(".price span").each(function(i){
            var $this = $(this);
            $this.on('click',function(){
                $(".price span").removeClass('lvs');
                $this.addClass('lvs');
            });
        });
	</script>
</html>
